<script setup lang="ts">
import { ref } from 'vue';
import Discount from '../discount';
import PaySelectMobile from './select.vue';

import type { PaymentProps } from '../types';

const props = defineProps<PaymentProps>();

const isOpenPopup = ref<boolean>(false);
</script>

<template>
  <div
    class="fixed bottom-0 left-0 w-screen bg-white text-center dark:bg-zinc-300"
  >
    <Discount />
    <div class="flex justify-between px-1 py-0.5 text-xs">
      <div class="text-left text-zinc-900 dark:text-zinc-200">
        <p>
          券后合计
          <span class="font-sans text-[16px] font-medium text-red-600">¥</span>
          <span class="font-sans text-[22px] font-medium text-red-600">
            {{ props.payData.price }}
          </span>
        </p>
        <p class="text-red-600">优惠券:限时立减 ¥10</p>
      </div>
      <MButton
        class="w-[120px]"
        :isActiveAnim="false"
        @click="isOpenPopup = true"
      >
        立即开通
      </MButton>
    </div>

    <MPopup v-model="isOpenPopup" class="rounded">
      <PaySelectMobile :payData="props.payData" />
    </MPopup>
  </div>
</template>
